<template>
  <!-- 顶部浮动工具栏 -->
  <transition name="toolbar-slide">
    <header v-show="showToolbar" class="modern-toolbar">
      <div class="toolbar-container">
        <!-- 左侧操作区 -->
        <div class="toolbar-section toolbar-left">
          <button class="icon-btn" title="切换侧边栏" @click="$emit('toggle-sidebar')">
            <i class="fas fa-bars" />
          </button>
          <div class="divider" />
          <button
            class="icon-btn"
            :class="{ active: editorState.isFocusMode }"
            title="专注模式 (Ctrl+F)"
            @click="$emit('toggle-focus-mode')"
          >
            <i class="fas fa-eye" />
          </button>
          <button
            class="icon-btn"
            :class="{ active: editorState.isFullscreen }"
            title="全屏 (F11)"
            @click="$emit('toggle-fullscreen')"
          >
            <i class="fas fa-expand" />
          </button>
          <div class="divider" />
          <!-- 编辑器模式切换 -->
          <div class="editor-mode-toggle">
            <button
              class="mode-btn"
              :class="{ active: editorState.activeEditor === 'markdown' }"
              title="Markdown编辑器"
              @click="$emit('switch-editor-mode', 'markdown')"
            >
              <i class="fab fa-markdown" />
              M
            </button>
            <button
              class="mode-btn"
              :class="{ active: editorState.activeEditor === 'rich' }"
              title="富文本编辑器"
              @click="$emit('switch-editor-mode', 'rich')"
            >
              <i class="fas fa-pen" />
              T
            </button>
          </div>
        </div>

        <!-- 中央标题区 -->
        <div class="toolbar-section toolbar-center">
          <div class="title-container">
            <input
              :value="blogTitle"
              :placeholder="hasArticle ? '无标题' : '选择文章开始编辑'"
              class="title-input"
              :class="{ 'has-content': blogTitle, disabled: !hasArticle }"
              :disabled="!hasArticle"
              maxlength="150"
              @input="$emit('update:blog-title', $event.target.value)"
              @focus="$emit('title-focus')"
            />
            <div v-if="blogTitle && hasArticle" class="title-status">
              <span class="char-count">{{ blogTitle.length }}/150</span>
            </div>
          </div>
        </div>

        <!-- 右侧信息操作区 -->
        <div class="toolbar-section toolbar-right">
          <!-- 写作统计 -->
          <div class="stats-container">
            <div class="writing-stats">
              <span class="stat-item">{{ writingStats.wordCount }} 字</span>
              <span class="stat-separator">•</span>
              <span class="stat-item">{{ writingStats.readingTime }} 分钟</span>
            </div>
            <div class="save-indicator">
              <transition name="save-status" mode="out-in">
                <span
                  v-if="editorState.hasUnsavedChanges"
                  key="unsaved"
                  class="save-status unsaved"
                >
                  <span class="status-dot" />
                  有未保存的更改
                </span>
                <span v-else-if="editorState.lastSaved" key="saved" class="save-status saved">
                  <span class="status-dot saved" />
                  {{ formatSaveTime(editorState.lastSaved) }}
                </span>
                <span v-else key="ready" class="save-status ready">
                  <span class="status-dot ready" />
                  就绪
                </span>
              </transition>
            </div>
          </div>

          <!-- 操作按钮组 -->
          <div v-if="hasArticle" class="action-buttons">
            <button
              class="action-btn secondary"
              :disabled="editorState.isLoading"
              @click="$emit('save-draft')"
            >
              <i v-if="!editorState.isLoading" class="fas fa-save" />
              <div v-else class="loading-spinner" />
              保存草稿
            </button>
            <button
              class="action-btn primary"
              :disabled="editorState.isLoading"
              @click="$emit('publish')"
            >
              <i class="fas fa-paper-plane" />
              发布
            </button>
          </div>
          <!-- 无文章时的提示按钮 -->
          <div v-else class="no-article-hint">
            <button class="hint-btn" disabled>
              <i class="fas fa-edit" />
              选择文章开始编辑
            </button>
          </div>
        </div>
      </div>
    </header>
  </transition>
</template>

<script setup lang="ts">
// Props
interface Props {
  showToolbar: boolean;
  editorState: {
    activeEditor: 'markdown' | 'rich';
    isFocusMode: boolean;
    isFullscreen: boolean;
    hasUnsavedChanges: boolean;
    lastSaved: Date | string | null | undefined;
    isLoading: boolean;
  };
  blogTitle: string;
  writingStats: {
    wordCount: number;
    readingTime: number;
  };
  hasArticle?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  showToolbar: true,
  blogTitle: '',
  writingStats: () => ({
    wordCount: 0,
    readingTime: 0
  })
});

// Emits
const emit = defineEmits<{
  (e: 'update:blog-title', value: string): void;
  (e: 'title-focus'): void;
  (e: 'toggle-sidebar'): void;
  (e: 'toggle-focus-mode'): void;
  (e: 'toggle-fullscreen'): void;
  (e: 'switch-editor-mode', mode: 'markdown' | 'rich'): void;
  (e: 'save-draft'): void;
  (e: 'publish'): void;
}>();

// 格式化保存时间
const formatSaveTime = (date: Date | null | string | undefined): string => {
  if (!date) return '';

  // 处理不同类型的日期输入
  let dateObj: Date;

  if (date instanceof Date) {
    dateObj = date;
  } else if (typeof date === 'string') {
    // 尝试解析字符串日期
    dateObj = new Date(date);
    // 检查解析结果是否有效
    if (isNaN(dateObj.getTime())) {
      console.warn('Invalid date string:', date);
      return '保存时间未知';
    }
  } else {
    console.warn('Unsupported date type:', typeof date);
    return '保存时间未知';
  }

  const now = new Date();
  const diff = now.getTime() - dateObj.getTime();

  if (diff < 60000) return '刚刚保存';
  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前保存`;
  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前保存`;

  return `${dateObj.toLocaleDateString()} ${dateObj.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit'
  })}`;
};
</script>

<style lang="scss" scoped>
// 工具栏进入/离开动画
.toolbar-slide-enter-active,
.toolbar-slide-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbar-slide-enter-from {
  transform: translateY(-100%);
  opacity: 0;
}

.toolbar-slide-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

// 现代化顶部工具栏
.modern-toolbar {
  height: 64px; // 稍微减小高度
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  .toolbar-container {
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;

    .toolbar-section {
      display: flex;
      align-items: center;
      gap: 16px;

      &.toolbar-left {
        flex: 0 0 auto;
      }

      &.toolbar-center {
        flex: 1;
        justify-content: center;
        max-width: 600px;
      }

      &.toolbar-right {
        flex: 0 0 auto;
        gap: 24px;
      }
    }

    // 分隔线
    .divider {
      width: 1px;
      height: 24px;
      background: rgba(0, 0, 0, 0.1);
    }

    // 图标按钮
    .icon-btn {
      width: 40px;
      height: 40px;
      border: none;
      background: transparent;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #5f6368;
      transition: all 0.2s ease;
      position: relative;

      &:hover {
        background: rgba(0, 0, 0, 0.05);
        color: #202124;
      }

      &.active {
        background: rgba(25, 103, 210, 0.1);
        color: #1967d2;

        &::before {
          content: '';
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
          width: 4px;
          height: 4px;
          background: #1967d2;
          border-radius: 50%;
        }
      }

      i {
        font-size: 18px;
      }
    }

    // 编辑器模式切换
    .editor-mode-toggle {
      display: flex;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      padding: 4px;
      gap: 4px;

      .mode-btn {
        padding: 8px 12px;
        border: none;
        background: transparent;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        color: #5f6368;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }

        &.active {
          background: white;
          color: #1967d2;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        i {
          font-size: 14px;
        }
      }
    }

    // 标题输入区域
    .title-container {
      position: relative;
      width: 100%;

      .title-input {
        width: 100%;
        border: none;
        background: transparent;
        font-size: 18px;
        font-weight: 600;
        color: #202124;
        text-align: center;
        outline: none;
        padding: 8px 16px;
        border-radius: 8px;
        transition: all 0.2s ease;

        &::placeholder {
          color: #9aa0a6;
          font-weight: 400;
        }

        &:hover {
          background: rgba(0, 0, 0, 0.03);
        }

        &:focus {
          background: rgba(0, 0, 0, 0.05);
        }

        &.has-content {
          color: #202124;
        }

        &.disabled {
          cursor: not-allowed;
          opacity: 0.6;
          background: rgba(0, 0, 0, 0.02);

          &::placeholder {
            color: #9aa0a6;
          }
        }
      }

      .title-status {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;

        .char-count {
          font-size: 11px;
          color: #9aa0a6;
          background: rgba(0, 0, 0, 0.05);
          padding: 2px 6px;
          border-radius: 4px;
        }
      }
    }

    // 写作统计
    .stats-container {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;

      .writing-stats {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #5f6368;

        .stat-item {
          font-weight: 500;
        }

        .stat-separator {
          opacity: 0.6;
        }
      }

      .save-indicator {
        .save-status {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 11px;
          font-weight: 500;

          .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #9aa0a6;

            &.saved {
              background: #34a853;
            }

            &.ready {
              background: #fbbc04;
            }
          }

          &.unsaved {
            color: #ea4335;
          }

          &.saved {
            color: #34a853;
          }

          &.ready {
            color: #fbbc04;
          }
        }
      }

      // 保存状态动画
      :deep(.save-status-enter-active),
      :deep(.save-status-leave-active) {
        transition: all 0.2s ease;
      }

      :deep(.save-status-enter-from),
      :deep(.save-status-leave-to) {
        opacity: 0;
        transform: translateY(-4px);
      }
    }

    // 操作按钮组
    .action-buttons {
      display: flex;
      gap: 12px;

      .action-btn {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 100px;
        justify-content: center;

        &.secondary {
          background: rgba(0, 0, 0, 0.05);
          color: #5f6368;
          border: 1px solid rgba(0, 0, 0, 0.1);

          &:hover:not(:disabled) {
            background: rgba(0, 0, 0, 0.1);
            color: #202124;
          }

          &:active:not(:disabled) {
            transform: translateY(1px);
          }
        }

        &.primary {
          background: #1967d2;
          color: white;
          border: 1px solid #1967d2;

          &:hover:not(:disabled) {
            background: #1557b0;
            border-color: #1557b0;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(25, 103, 210, 0.3);
          }

          &:active:not(:disabled) {
            transform: translateY(0);
          }

          &:disabled {
            background: #9aa0a6;
            border-color: #9aa0a6;
            cursor: not-allowed;
            opacity: 0.7;
          }
        }

        i {
          font-size: 16px;
        }

        .loading-spinner {
          width: 16px;
          height: 16px;
          border: 2px solid transparent;
          border-top: 2px solid currentColor;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }
      }

      // 无文章提示
      .no-article-hint {
        .hint-btn {
          padding: 10px 20px;
          border: 1px solid rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          background: rgba(0, 0, 0, 0.03);
          color: #9aa0a6;
          font-size: 14px;
          font-weight: 500;
          cursor: not-allowed;
          display: flex;
          align-items: center;
          gap: 8px;
          opacity: 0.7;

          i {
            font-size: 16px;
          }
        }
      }
    }
  }
}

// 加载动画
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .modern-toolbar {
    .toolbar-container {
      padding: 0 16px;
      gap: 12px;

      .toolbar-section {
        &.toolbar-left {
          gap: 8px;

          .icon-btn {
            width: 36px;
            height: 36px;

            i {
              font-size: 16px;
            }
          }

          .editor-mode-toggle {
            .mode-btn {
              padding: 6px 8px;
              font-size: 11px;

              i {
                font-size: 12px;
              }
            }
          }
        }

        &.toolbar-center {
          max-width: 400px;

          .title-input {
            font-size: 16px;
            padding: 6px 12px;
          }
        }

        &.toolbar-right {
          gap: 16px;

          .stats-container {
            .writing-stats {
              font-size: 11px;

              .stat-separator {
                display: none; // 小屏幕隐藏分隔符
              }
            }

            .save-indicator {
              .save-status {
                font-size: 10px;
              }
            }
          }

          .action-buttons {
            gap: 8px;

            .action-btn {
              padding: 8px 12px;
              font-size: 12px;
              min-width: 80px;

              i {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .modern-toolbar {
    .toolbar-container {
      padding: 0 12px;

      .toolbar-section {
        &.toolbar-left {
          .divider {
            display: none; // 超小屏幕隐藏分隔线
          }
        }

        &.toolbar-right {
          gap: 12px;

          .stats-container {
            display: none; // 超小屏幕隐藏统计信息
          }

          .action-buttons {
            .action-btn {
              padding: 6px 10px;
              font-size: 11px;
              min-width: 60px;

              span {
                display: none; // 超小屏幕只显示图标
              }

              i {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
